/*
 * @Author: your name
 * @Date: 2022-04-07 09:19:09
 * @LastEditTime: 2022-04-07 10:28:24
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \erp-management-system\src\views\finance\accessoryModal\accessoryModal.jsx
 */
/*
 * @Author: your name
 * @Date: 2022-03-31 19:13:08
 * @LastEditTime: 2022-04-02 16:33:38
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \lalalal\src\views\finance\accessoryModal\accessoryModal.jsx
 */
import React, { useState, useEffect } from 'react';
import { Modal, Button, Row, Table, List, Col, Tooltip, Image, Form, Upload, Input } from 'antd';
import { DeleteFilled,CloseCircleFilled } from '@ant-design/icons'
import './accessoryModal.css'
// import './Model.css'

const Accessorymodal = (props) => {
    const { TextArea } = Input
    // console.log(props);
    const [isModalVisible, setIsModalVisible] = useState(false);
    //控制缩略图和列表显示
    const [isHide, setisHide] = useState(true);
    // 缩略图删除
    const [delImage, setDelImage] = useState(false)
    // 上传附件弹窗
    const [uploadAcc, setUploadAcc] = useState(false)
    const [fileListAcc, setFileListAcc] = useState([])
    const [form] = Form.useForm()
    const [currCheck, setcurrCheck] = useState(true)

    //Modal状态
    const showModal = () => {
        setIsModalVisible(true);
    };
    const handleOk = () => {
        setIsModalVisible(false);
        setUploadAcc(true)
    };
    const handleCancel = () => {
        setIsModalVisible(false);
    };

    //缩略图列表显示
    const thumb = () => {
        setisHide(true)
    }
    // 缩略图列表数据
    const imgData = [
        {
            title: 'Title 1',
        },
        {
            title: 'Title 2',
        },
        {
            title: 'Title 3',
        },
        {
            title: 'Title 4',
        }
    ];

    //列表展示
    const showTable = () => {
        setisHide(false)
    }
    //列表数据
    const accessoryArr = [];
    for (let i = 0; i < 5; i++) {
        accessoryArr.push({
            key: i,
            accessoryTitle: `王者`,
            fileSize: `王者王者`,
            remark: '100',
            salesman: `富贵`,
            putTime: '2022-03-30',
        });
    }

    const data = [
        {
            key: '1',
            name: 'John Brown',
            address: 'New York No. 1 Lake Park',
        },
    ];
    const columns = [
        {
            title: '附件标题',
            dataIndex: 'accessoryTitle',
            key: 'accessoryTitle',
            width: 300,
            render: text => <a>{text}</a>,
        },
        {
            title: '文件大小',
            dataIndex: 'fileSize',
            key: 'fileSize',
            width: 80,

        },
        {
            title: '下载地址',
            dataIndex: 'address',
            key: 'address',
            width: 80,

        },
        {
            title: '备注',
            dataIndex: 'remark',
            key: 'remark',
            width: 80,

        },
        {
            title: '业务员',
            dataIndex: 'salesman',
            key: 'salesman',
            width: 80,

        },
        {
            title: '上传时间',
            dataIndex: 'putTime',
            key: 'putTime',
            width: 80,

        },
        {
            title: '管理',
            dataIndex: 'manage',
            key: 'manage',
            width: 80,
            render: (manage, record) => {
                return <DeleteFilled onClick={() => { delCurrImage(record) }} style={{ "color": '#c00000', "cursor": "pointer" }} />
            }
        }
    ]
    // 列表确认删除缩略图
    const delHandleOk = () => {
        setDelImage(false)
    }
    // 列表点击删除
    const delCurrImage = () => {
        setDelImage(true)
    }
    // 上传附件
    const uploadAccOk = () => {
        setUploadAcc(false)
    }
    // 图片上传
    const handleChange = info => {
        let fileList = [...info.fileList];
        fileList = fileList.slice(-2);
        fileList = fileList.map(file => {
            if (file.response) {
                file.url = file.response.url;
            }
            return file;
        });
        console.log(fileList)
        setFileListAcc(fileList)
    };
    const propsType = {
        action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
        onChange: handleChange,
        multiple: true,
    };

    //页面挂载
    return (
        <>
            <Button type="primary" onClick={showModal} size='midlle' className='btn-modal'>
                {props.accessory}
            </Button>
            <Modal
                title="财务附件"
                visible={isModalVisible}
                onOk={handleOk}
                onCancel={handleCancel}
                okText='上传'
                cancelText='关闭'
                width={800}
                className='accessory_modal'
            >
                <Row>
                    <Button type="primary" onClick={thumb} style={{ backgroundColor: isHide ? '#F56659' : '#609CD0' }}>
                        缩略图
                    </Button>
                    <Button type="primary" onClick={showTable} style={{ backgroundColor: !isHide ? '#F56659' : '#609CD0' }}>
                        列表显示
                    </Button>
                </Row>
                <Row>
                    {/* <Col style={{ display: isHide ? '' : 'none' }}>
                        抱歉再无内容
                    </Col> */}
                    <Col span={24} className={'accessory-images'} style={{ display: isHide ? '' : 'none' }}>
                        <List
                            grid={{ gutter: 16, column: 4 }}
                            dataSource={imgData}
                            renderItem={item => (
                                <List.Item>
                                    <Row justify={'center'} className={'image-list'}>
                                        <Col span={24} className={'name'}>
                                            {item.title}.jpg
                                        </Col>
                                        <Col className={'image'}>
                                            <Tooltip placement="topRight" title={'131231231'}>
                                                <Image
                                                    preview={true}
                                                    width={150}
                                                    height={150}
                                                    src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                                                />
                                            </Tooltip>
                                        </Col>
                                        <Col span={24} className={'handel-btn'}>
                                            <Button size="small" style={{ backgroundColor: '#5294bf' }}>查看</Button>
                                            <Button size="small" onClick={() => { delCurrImage() }} style={{ backgroundColor: '#ce5a6a' }}>删除</Button>
                                        </Col>
                                    </Row>
                                </List.Item>
                            )}
                        />
                    </Col>
                    <Col span={24} style={{ display: !isHide ? '' : 'none' }}>
                        <Table columns={columns} dataSource={accessoryArr} pagination={false} />
                    </Col>
                </Row>

            </Modal>
            {/* 删除弹窗 */}
            <Modal
                className='dep_add_modal del_modal'
                title="消息"
                okText="确定"
                cancelText="取消"
                visible={delImage}
                onOk={delHandleOk}
                onCancel={() => { setDelImage(false) }}
                destroyOnClose={true}
                forceRender={true}
                zIndex={2000}
            >
                <Row align='middle' gutter={10}>
                    <Col> <CloseCircleFilled style={{ color: '#faa685', fontSize: '36px' }} /></Col>
                    <Col> <span>是否确定删除?</span></Col>
                </Row>
            </Modal>

            {/* 上传附件modal */}
            <Modal
                className='dep_add_modal upload_modal'
                title="上传附件"
                okText="保存"
                cancelText="取消"
                visible={uploadAcc}
                onOk={() => { uploadAccOk() }}
                onCancel={() => {
                    // 点击取消清空Model框
                    setUploadAcc(false)
                    form.resetFields()
                    setFileListAcc([])
                }}
                destroyOnClose={true}
                forceRender={true}
                zIndex={2000}
            >
                <h3 style={{ fontWeight: '700' }}>新增附件记录</h3>
                <Form preserve={false} form={form}>
                    <Form.Item label="请选择" name="chooseFile" className="upload">
                        <Upload {...propsType} fileList={fileListAcc}>
                            <Button style={{ backgroundColor: '#00b7ee', color: '#fff' }}>选择文件</Button>
                        </Upload>
                    </Form.Item>
                    <Form.Item label="备注" name="remark" labelCol={{ span: 4 }}>
                        <TextArea rows={4} placeholder="" />
                    </Form.Item>
                </Form>
            </Modal>
        </>
    );
}

export default Accessorymodal;
